<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ实现遮幕追随鼠标移动方向移入移出</title>
    <style>
        ul,li{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .affair {
             overflow: hidden;
             width: 1296px;
             margin: 16px 0 80px -8px;
        }
        .affair li {
             width: 308px;
             height: 278px;
             background: skyblue;
             margin: 0 8px 16px;
             float: left;
             position: relative;
             cursor: pointer;
             overflow: hidden;
        }
        .affair-next {
          position: absolute;
          left: 0;
          bottom: 0;
          top: 278px;
          width: 308px;
          height: 278px;
          background-color: rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <h1>JQ实现遮幕追随鼠标移动方向移入移出</h1>
    <ul class="affair">
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
        <li><div class="affair-next"></div></li>
    </ul>
</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
      document.querySelectorAll(".affair li").forEach(function (li) {
        const width = li.offsetWidth;
        const height = li.offsetHeight;
        li.onmouseenter = function (e) {
          e = e || window.event;
          // 2.1分别定义left, top, right, bottom为鼠标移入时与li的左，上，右，下边的距离
            let left = e.pageX - this.offsetLeft;
            let top = e.pageY - this.offsetTop;
            let right = this.offsetLeft + width - e.pageX;
            let bottom = this.offsetTop + height - e.pageY;
            console.log(left, top, right, bottom);
            // 2.2 取出鼠标移入时与li的左，上，右，下边的距离中的最小值
            let min = Math.min(left, top, right, bottom);
            console.log(min);
            // 2.3判定最小值，对应的变量就是鼠标移入的方向
            switch (min) {
              // 2.3.1最小值为left的时候，说明鼠标从左边移入
              case left:
                $(this)
                  .find(".affair-next")
                  .css({ left: -width + "px", top: 0 })
                  .stop(!0)
                  .animate({ left: 0, top: 0 }, 300);
                break;
              case top:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: -height + "px" })
                  .stop(!0)
                  .animate({ left: 0, top: 0 }, 300);
                break;
              case right:
                $(this)
                  .find(".affair-next")
                  .css({ left: width + "px", top: 0 })
                  .stop(!0)
                  .animate({ left: 0, top: 0 }, 300);
                break;
              case bottom:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: height + "px" })
                  .stop(!0)
                  .animate({ left: 0, top: 0 }, 300);
                break;
            }
          };
          li.onmouseleave = function (e) {
            e = e || window.event;
            let left = e.pageX - this.offsetLeft;
            let top = e.pageY - this.offsetTop;
            let right = this.offsetLeft + width - e.pageX;
            let bottom = this.offsetTop + height - e.pageY;
            let min = Math.min(left, top, right, bottom);
            console.log(min);
            console.log(this);
            switch (min) {
              case left:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: 0 })
                  .stop(!0)
                  .animate({ left: -width + "px", top: 0 }, 300);
                break;
              case top:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: 0 })
                  .stop(!0)
                  .animate({ left: 0, top: -height + "px" }, 300);
                break;
              case right:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: 0 })
                  .stop(!0)
                  .animate({ left: width + "px", top: 0 }, 300);
                break;
              case bottom:
                $(this)
                  .find(".affair-next")
                  .css({ left: 0, top: 0 })
                  .stop(!0)
                  .animate({ left: 0, top: height + "px" }, 300);
                break;
            }
          };
        });
      });
</script>
</html>